<template>
	<view class="page">
		<view class="content">
			<unicloud-db v-slot:default="{data, loading, error, options}" collection="abu_activity_news" ref="udb">
				<view>
					<!-- {{data}} -->
					<uni-list-item v-for="(item,index) in data" title="" direction="column" class="item">
						<template v-slot:body>
							<view class="content">
								<view class="title">
									<text>{{item.title}}</text>
								</view>
								<view class="body">
									<text style="font-size: 12px;font-weight: 400;">{{item.content}}</text>
								</view>
								<view class="img"
									style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
									<image v-if="item&&item.img" :src="item.img.url" mode="aspectFit"></image>
								</view>
								<view class="time"
									style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
									活动时间:{{timestampToDateString(item.publish_date)}}
								</view>
							</view>
						</template>
					</uni-list-item>
				</view>
			</unicloud-db>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				current_user_info: {},
				list: ['失物墙', '拾物墙'],
				current: 0
			}
		},
		onLoad() {
			this.current_user_info = uniCloud.getCurrentUserInfo()
		},
		onPullDownRefresh() {
			this.$refs.udb.loadMore(() => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore();
		},
		onShow() {
			// this.$refs.udb.loadData() //udb为unicloud-db组件的ref属性值

		},
		methods: {
			remove_item(id) {
				uni.showModal({
					title: '确认要删除吗？',
					content: '您确定要删除这个笔记吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$refs.udb.remove(id)
							return
						} else {
							return
						}
					},
					fail: () => {},
					complete: () => {}
				});


			},
			timestampToDateString(timestamp) {
				var date = new Date(timestamp);
				// 使用 Date 对象的方法获取年、月、日等信息
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份是从 0 开始的，所以需要加 1
				var day = date.getDate();
				// 将其格式化为想要的字符串格式
				var dateString = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
				return dateString;
			},
			to_add() {
				uni.navigateTo({
					url: "/pages/abu_lost/add"
				})
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>


<style lang="scss">
	.page {
		background-color: #C5EBFC;
		height: 100vh;
	}

	.title {
		font-size: 25px;
		line-height: 30px;
		margin-bottom: 20px;
	}

	.content {
		padding: 20px;

		.head {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.item {
			margin: 10px;
			border-radius: 10px;
			background-color: #fff;
		}




		image {
			// width: 200px;
			// height: auto;
		}
	}



	.footer {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.time {
			font-size: 12px;
			font-color: #c8c8c8;
		}
	}



	.fab {
		padding: 5px;
		background-color: #00A8F3;
		position: fixed;
		bottom: calc(10vh - 25px);
		/* 将按钮位置固定在页面垂直居中 */
		left: calc(50vw - 25px);
		/* 将按钮位置固定在页面水平居中 */
		display: flex;
		flex-direction: row;
		font-size: 20px;
		align-items: center;
		border-radius: 25px;
	}
</style>